<template>
  <!-- 资讯对话框 -->
  <el-dialog
    custom-class="custom_dialog_box"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    width="780px"
    append-to-body
    destroy-on-close
    @close="dialogColse"
    fullscreen
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="80px"
      v-loading="submitLoading"
    >
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入标题"
          maxlength="50"
          clearable
        />
      </el-form-item>
      <el-form-item label="日期" prop="publishTime">
        <el-date-picker
          v-model="formData.publishTime"
          type="datetime"
          placeholder="请选择日期"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          time-format="HH:mm"
        />
      </el-form-item>
      <el-form-item label="首图" prop="picUrl">
        <el-upload
          ref="upload"
          class="avatar-uploader"
          accept=".jpeg,.png,.jpg,.bmp,.gif"
          :headers="upload.headers"
          :action="upload.url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="formData.picUrl" :src="formData.picUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input
          v-model="formData.introduction"
          type="textarea"
          placeholder="请输入简介"
          maxlength="500"
          show-word-limit
          :autosize="{ minRows: 4, maxRows: 6 }"
        />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <editor v-model="formData.content" :min-height="192" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">
        保 存
      </el-button>
      <el-button @click="dialogColse">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from "@/utils/auth";
import { UPLOADURL } from "@/api/useMenu/config";
import {
  informationSave,
  informationQueryById,
  informationUpdate,
} from "@/api/useMenu/consult";

export default {
  name: "ConsultHandleDialog",
  data() {
    return {
      title: "", //标题
      enterType: "", // 进入类型 add / edit
      visible: false, // 弹框状态
      // 表单数据
      formData: {},
      // 校验
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: ["blur", "change"],
          },
        ],
        publishTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        picUrl: [
          {
            required: true,
            message: "请上传图片",
            trigger: "change",
          },
        ],
        introduction: [
          {
            required: true,
            message: "请输入简介",
            trigger: ["blur", "change"],
          },
        ],
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["blur", "change"],
          },
        ],
      },
      submitLoading: false, //保存按钮加载

      // 上传参数
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + UPLOADURL,
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 打开弹框
    async openDialog(enterType = "add", row = {}) {
      this.visible = true;
      this.submitLoading = true;
      this.enterType = enterType;
      this.title = (enterType === "add" ? "新增" : "修改") + "资讯";
      if (enterType === "edit") {
        let { code, data, msg } = await informationQueryById({ id: row.id });
        if (code === 200) {
          this.formData = { ...data };
        } else {
          this.$modal.msgError(msg || "接口异常");
        }
      }
      this.submitLoading = false;
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      if (res.code === 200) {
        this.$set(this.formData, "picUrl", res.msg);
      } else {
        this.$modal.msgError("上传异常");
      }
    },
    // 上传之前
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 20;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 20MB!");
      }
      return isLt2M;
    },
    //  提交按钮
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          let { enterType, formData } = this;
          let request =
            enterType === "add" ? informationSave : informationUpdate;
          let { code, msg } = await request(formData);
          if (code === 200) {
            let msg = enterType === "add" ? "新增成功" : "修改成功";
            this.$modal.msgSuccess(msg);
            this.dialogColse();
            this.$emit("updateTable");
          } else {
            this.$modal.msgError(msg || "接口异常");
          }
          this.submitLoading = false;
        }
      });
    },
    // Dialog 关闭的回调
    dialogColse() {
      this.visible = false;
      this.formData = {};
      console.log("关闭的回调=======");
      //   this.reset();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .custom_dialog_box {
  .el-dialog__headerbtn {
    font-size: 28px;
  }
  .el-dialog__body {
    // max-height: 680px;
    overflow: auto;
  }
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
